<template>
  <view style="padding: 0 40rpx;">
      <!-- <view class="flex j-content row">
         <view class="label">部门</view> 
         <view class="ipt">
            <w-select width="100%" height="100rpx" border="none" fontSize="17px" marginright="40rpx" textagin="right"  :showClose="false" @change="changedeptId" :defaultValue="form.deptName || '请选择部门'" valueName="name" :list="deptList"/>
         </view>
      </view>
      <view class="flex j-content row">
         <view class="label">人员</view> 
         <view class="ipt">
            <w-select width="100%" height="100rpx" border="none" 
            fontSize="17px" marginright="40rpx" textagin="right" :showClose="false" @change="changeuserId" :defaultValue="form.userName || '请选择人员'" valueName="name" :list="userList"/>
        </view>
      </view> -->
      <view class="flex j-content row">
         <view class="label">业务日期</view> 
        <view class="ipt" style="text-align: right;">
            <picker mode="date" class="pick flex a-item fd" :value="form.busDate" @change="bindbusDateChange">
            <view class="uni-input" style="color: #333;">{{ form.busDate?form.busDate:'请选择业务日期' }}</view>
            </picker>
        </view>
      </view>
      <view class="flex j-content row">
        <view class="red">*</view> 
         <view class="label">加班开始时间</view> 
        <view class="ipt" style="text-align: right;">
            <!-- <picker mode="date" class="pick flex a-item fd" :value="form.startDate" @change="bindStartDateChange">
            <view class="uni-input" style="color: #000;">{{ form.startDate?form.startDate:'请选择开始日期' }}</view>
            </picker> -->
            <leeDatetime @change="startDateChange" placeholder="请选择日期时间" :value="form.beginTime"/>
        </view>
      </view>
      <view class="flex j-content row">
        <view class="red">*</view> 
        <view class="label">加班结束时间</view> 
        <view class="ipt" style="text-align: right;">
            <!-- <picker mode="date" class="pick flex a-item  fd" :value="form.endDate" @change="bindEndDateChange">
            <view class="uni-input" style="color: #000;">{{ form.endDate?form.endDate:'请选择结束日期' }}</view>
            </picker> -->
            <!-- 使用方式 -->
            <leeDatetime @change="bindLeeDateTimeChange" placeholder="请选择日期时间" :value="form.endTime"/>
        </view>
      </view>
      <view class="flex j-content row">
        <view class="label">加班天数</view> 
        <view class="ipt">
            <input type="number" v-model="form.days" class="right">
        </view>
        <span>天</span>
      </view>
      <view class="flex j-content row">
        <view class="label">加班地点</view> 
        <view class="ipt">
            <input type="text" placeholder="请填入地点" v-model="form.place" class="right">
        </view>
      </view>
      <view style="margin: 20px 0;">
        <view>加班内容</view> 
        <view class="ipt">
            <textarea class="texta" type="text" v-model="form.content"></textarea>
        </view>
      </view>
      <view style="margin: 20px 0;">
        <view>加班效果</view> 
        <view class="ipt">
            <textarea class="texta" type="text" v-model="form.effect"></textarea>
        </view>
      </view>
      <button @click="handleSubmit" class="btn">提交</button>
  </view>
</template>

<script>
import leeDatetime  from "@/components/lee-datetime";
import { getChildSysDeptList,getSysUserList} from "@/service/api/logistics";
import { addOrSave} from "@/service/api/workOvertime";
export default {
    components: {
        leeDatetime,
    },
    created() {
        getChildSysDeptList().catch(err=>{
            this.deptList = err.content
            })
            getSysUserList().catch(err=>{
            this.userList = err.content
            })
    },
    data() {
        return {
            form:{},
            deptList:[],
            userList:[],
        }
    },
    methods: {
        changedeptId(val){
            this.form.deptCode=val.code
            this.form.deptId=val.id
            this.form.deptName=val.name
        },
        changeuserId(val){
            this.form.userCode=val.code
            this.form.userId=val.id
            this.form.userName=val.name
        },
        // bindStartDateChange: function(e) {
        //     this.$set(this.form,'startDate',e.detail.value)
        // },
        // bindEndDateChange: function(e) {
        //     this.$set(this.form,'endDate',e.detail.value)
        // },
        bindbusDateChange: function(e) {
            this.$set(this.form,'busDate',e.detail.value)
        },
        handleSubmit(){
            console.log(this.form,'提交');
            addOrSave(this.form).then(res=>{
                uni.navigateBack({
                    delta: 1,
                })
            }).catch(err=>{
                uni.showModal({title:'提示',content:err.msg});
            })
        },
            bindLeeDateTimeChange(e) {
            this.$set(this.form,'endTime',e.value)
            },
            startDateChange(e) {
                this.$set(this.form,'beginTime',e.value)
            },
    },
}
</script>

<style lang="scss" scoped>
.row{
    line-height: 120rpx;
	border-bottom: rgba(200, 200, 200, 0.5) 1px solid;
    .label{
        margin: auto;
    }
    .ipt{
        flex-grow: 1;
        margin: auto;
    }
    .fd{
        flex-direction: row-reverse;
    }
    .right{
        text-align: right;
        margin-right: 40rpx;
    }
    
}
.btn{
        width: 100%;
        border-radius: 40rpx;
        padding: 10rpx 0;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #007aff;
        z-index: 999;
    }
	.texta{
		height: 150rpx;
		border:1px solid rgba(200, 200, 200, 0.5);
		margin-top: 10rpx;
		width: 100%;
	}
</style>